<template>
    <div>
        <div class="music-icon">
            <img src="http://lmt1.oss-cn-shenzhen.aliyuncs.com/h5-1/music_record.png" alt="">
        </div>
        <div class="bottom-go-down">
            <img src="http://lmt1.oss-cn-shenzhen.aliyuncs.com/h5-1/up.png"></img>
        </div>
        <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback"
                class="mySwiper" :style="`height:${G.dom.getHeight()}px`">
            <swiper-slide class="slider" :style="`height:${G.dom.getHeight()}px`">
                <div class="slide-inner">
                    <Page1 :isShow="activeIndex==0"></Page1>
                </div>
            </swiper-slide>
            <swiper-slide class="slider">
                <div class="slide-inner">
                    <Page2 :isShow="activeIndex==1"></Page2>
                </div>
            </swiper-slide>
            <swiper-slide class="slider">
                <div class="slide-inner">
                    <Page3 :isShow="activeIndex==2"></Page3>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>
<style lang="less" scoped>
    .bottom-go-down {
        position: absolute;
        bottom: 0px;
        left: px2rem((750-50)/2);
        z-index: 999;
        img {
            width: px2rem(50);
            height: px2rem(50);
        }
    }

    @-webkit-keyframes totation {
        0% {
            -webkit-transform: rotate(0deg);
        }
        50% {
            -webkit-transform: rotate(180deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
        }

    }

    .music-icon {
        animation: totation 2s infinite linear;
        position: absolute;
        right: 20px;
        top: 20px;
        width: px2rem(50);
        height: px2rem(50);
        z-index: 999;
        img {
            max-width: 100%;
            max-height: 100%;
        }
    }

    .slider {
        background: #eee;
        height: 100%;
        overflow: hidden;
    }

    .slide-inner {
        height: 100%;
    }
</style>
<script>
    import {getScale, getScale_into, getScale_out} from "./utils";
    import {getHeight} from "./utils/dom";
    import {getInArray} from "./utils";

    var interleaveOffset = 0.5;
    import Page1 from './page1'
    import Page2 from './page2'
    import Page3 from './page3'

    export default {
        components: {
            Page1, Page2, Page3
        },
        name: 'carrousel',
        data() {
            var self = this
            self.slideTransiting = false
            return {
                swiperOption: {
                    watchSlidesProgress: true,
                    direction: "vertical",
                    on: {
                        touchStart() {
                            self.slideTransiting = true
                        },
                        progress: function (progress) {
                            var swiper = this
                            /*will out*/
                            var currentSider = getInArray(swiper.slides, swiper.activeIndex)

                            if (self.slideTransiting) {
                                var scale1 = getScale_out(currentSider.progress)
                                $(currentSider).css(
                                    {transform: `scale(${scale1})`}
                                );
                            }

                        },
                        slideChange(index) {
                            var swiper = this
                            self.slideTransiting = false
                            self.$data.activeIndex = swiper.activeIndex
                        },
                        transitionEnd() {
                            self.slideTransiting = false
                            var swipers = this;
                            for (var i = 0; i < swipers.slides.length; i++) {
                                var slide = swipers.slides[i]
                                $(slide).css(
                                    {transform: `scale(1)`}
                                );
                            }
                        },
                        setTransition: function (speed) {
                            var swiper = this
                            for (var i = 0; i < swiper.slides.length; i++) {
                                $(swiper.slides[i]).css({transition: 'all ' + speed + 'ms linear'});
                            }
                        }
                    }
                },
                activeIndex: 0
            }
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper
            },
        },
        mounted() {
            // current swiper instance
            // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
            // console.log('this is current swiper instance object', this.swiper)
            // this.swiper.slideTo(3, 1000, false)
            TweenMax.fromTo(".bottom-go-down", 1, {y: -0, opacity: 1}, {y: -50, opacity: 0, repeat: -1});

        },
        methods: {
            callback() {
            },
            setTranslate() {

            },
        }
    }
</script>